<template>
  <div>
    <el-tabs type="border-card" tab-position="left" @tab-click="selectTabChange">
      <el-tab-pane v-for="(row, i) in leftModuleData" :key="row.id" :value="row.id" :label="row.module_title + ' - ' + row.id">
        <div class="btn-tools">
          <el-button-group class="btns">
            <el-button v-if="tabOnIndex == 'customFields'" size="mini" type="primary" @click="addEditCustomFieldVisible = true">
              <i class="el-icon-plus"></i> {{$t('btns.add') + $t('btns.field')}}
            </el-button>
            <el-button v-if="tabOnIndex == 'showBlocks'" size="mini" type="primary" @click="dialogAddModuleVisible = true">
              <i class="el-icon-plus"></i> {{$t('btns.add') + $t('btns.block')}}
            </el-button>
          </el-button-group>
        </div>
        <el-tabs @tab-click="selectTab" :value="tabOnIndex">
          <el-tab-pane name="fieldLayout">
            <span slot="label">
              <svg-icon icon-class="fieldExt" /> 字段布局
            </span>
            
            <dl class="blocks" v-for="(val, k) in tableData">
              <dt class="title">
                <svg-icon v-if="val.icon" :icon-class="val.icon" /> {{ val.blockname }}
              </dt>
              <draggable v-model="tableDatas" :options="{group:'people'}" @start="drag=true" @end="drag=false" :move="getdata" @update="datadragEnd">
                <dd class="item" v-for="(value, key) in tableDatas" :key="value.id + k + i">
                  <i class="sort-num">{{key + 1}}</i>
                  {{ value.blockname }}
                  <span><i class="el-icon-edit-outline"></i></span>
                </dd>
              </draggable>
            </dl>

          </el-tab-pane>

          <el-tab-pane name="customFields">
            <span slot="label">
              <svg-icon icon-class="customEdit" /> 自定义字段
            </span>

            <el-table :data="tableData" border style="width: 100%" size="mini">
              <el-table-column type="index" align="center"></el-table-column>

              <el-table-column prop="blockname" label="字段标签" align="center"></el-table-column>
              
              <el-table-column prop="blockname" label="字段名称" align="center"></el-table-column>

              <el-table-column prop="blockname" label="字段类型" align="center"></el-table-column>

              <el-table-column label="操作" width="160px" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="handleClick(scope.row)" >编辑</el-button>
                  <el-button size="mini" type="danger" >删除</el-button>
                </template>
              </el-table-column>

            </el-table>
          </el-tab-pane>

          <el-tab-pane name="showBlocks">
            <span slot="label">
              <svg-icon icon-class="legoBlock" /> 显示区域
            </span>

            <el-table :data="tableData" border style="width: 100%" size="mini">
              <el-table-column type="index" align="center"></el-table-column>

              <el-table-column prop="blockname" label="区域图标" align="center">
                <template slot-scope="scope">
                  <svg-icon v-if="scope.row.icon" :icon-class="scope.row.icon" />
                </template>
              </el-table-column>

              <el-table-column prop="blockname" label="显示区域" align="center"></el-table-column>

              <el-table-column prop="sort" label="排序" align="center"></el-table-column>

              <el-table-column label="操作" width="160px" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="handleModuleEdit(scope.row)" >编辑</el-button>
                  <el-button size="mini" type="danger" @click="handleModuleDel(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>

            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>

    <!-- 处理弹框等 -->
    <!-- 新增、修改自定义字段 -->
    <el-dialog class="dialog-dark-skin module-form" :title="getFieldTitle()" 
    :visible.sync="addEditCustomFieldVisible" width="30%" :append-to-body="appendToBody">
      <el-form :model="moduleForm" ref="moduleForm" label-width="68px" class="demo-moduleForm" size="mini">
        <el-scrollbar tag="div" class='is-empty' style="padding-right: 1px;" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list">          
          <el-row :gutter="20">
          
            <el-col :span="12">
              <el-form-item label="字段类型" prop="id">
                <el-select v-model="onUitype" placeholder="请选择">
                  <el-option v-for="item in fieldUitype" :key="item.id" :label="item.label" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="是否必填" prop="blockname">
                <el-checkbox-group v-model="moduleForm.blockname">
                  <el-checkbox label="必填" border></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row :gutter="20">
          
            <el-col :span="12">
              <el-form-item label="字段名称" prop="blockname">
                <el-input v-model="moduleForm.blockname"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="API名称" prop="blockname">
                <el-input v-model="moduleForm.blockname" placeholder="在数据库中字段名称"></el-input>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row :gutter="20">
          
            <el-col :span="12">
              <el-form-item label="默认值" prop="blockname">
                <el-input v-model="moduleForm.blockname" placeholder="默认值"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="提示文字" prop="blockname">
                <el-input v-model="moduleForm.blockname" placeholder="提示文字"></el-input>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row :gutter="20">
          
            <el-col :span="12">
              <el-form-item label="最小长度" prop="blockname">
                <el-input-number style="width:100%;" @blur="moduleForm.sort = Math.ceil(moduleForm.sort)" :min="0" :max="255" v-model="moduleForm.sort" placeholder="最大长度不能超过255">
                </el-input-number>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="最大长度" prop="blockname">
                <el-input-number style="width:100%;" @blur="moduleForm.sort1 = Math.ceil(moduleForm.sort1)" :min="moduleForm.sort" :max="255" v-model="moduleForm.sort1" placeholder="最大长度不能超过255">
                </el-input-number>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="小数位数" prop="blockname">
                <el-input-number style="width:100%;" @blur="moduleForm.sort1 = Math.ceil(moduleForm.sort1)" :min="moduleForm.sort" :max="255" v-model="moduleForm.sort1" placeholder="小数点位数">
                </el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

        </el-scrollbar>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="addEditCustomFieldVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitModule">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增、修改显示区域 -->
    <el-dialog class="dialog-dark-skin module-form" :title="getModuleTitle()" 
    :visible.sync="dialogAddModuleVisible" width="310px" :append-to-body="appendToBody">
      <el-form :model="moduleForm" ref="moduleForm" label-width="68px" class="demo-moduleForm" size="mini">
        <el-scrollbar tag="div" class='is-empty' style="padding-right: 1px;" wrap-class="el-select-dropdown__wrap" view-class="el-select-dropdown__list">          

          <el-form-item label="区域标题" prop="blockname">
            <el-input v-model="moduleForm.blockname"></el-input>
          </el-form-item>

          <el-form-item label="显示顺序" prop="sort">
            <el-input-number style="width:100%;" :min="0" v-model="moduleForm.sort"></el-input-number>
          </el-form-item>

          <el-form-item label="显示图标" prop="icon">
            <svg-icon v-if="moduleForm.icon" :icon-class="moduleForm.icon" />
            <el-button type="text" @click="selectIconDialog=true">选择</el-button>
          </el-form-item>

        </el-scrollbar>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogAddModuleVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitModule">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 图标选择弹框 -->
    <icon-select @selectIcon="(res) => { moduleForm.icon = res}" @visibleChange="res => {selectIconDialog = res} " :dialogVisible="selectIconDialog"></icon-select>
  </div>
</template>

<script>
import CardCarouel from '@/components/CardCarouel'
import draggable from 'vuedraggable'
import IconSelect from '@/components/IconSelect'
import { getModuleList } from '@/api/module'

export default {
  components: {
    CardCarouel,
    draggable,
    IconSelect
  },
  data() {
    return {
      tabOnIndex: 'fieldLayout',
      tableData: [{
        id: 1,
        blockname: '基本信息',
        icon: 'star',
        sort: '1',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        blockname: '考务信息',
        icon: 'users',
        sort: '2',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        blockname: '系统信息',
        icon: 'international',
        sort: '3',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id: 4,
        blockname: '描述信息',
        icon: '404',
        sort: '4',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      tableDatas: [{
        id: 1,
        blockname: '基本信息xxxx',
        icon: 'star',
        sort: '1',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        blockname: '考务信息xxx',
        icon: 'users',
        sort: '2',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        blockname: '系统信息xxx',
        icon: 'international',
        sort: '3',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        id: 4,
        blockname: '描述信息xxx',
        icon: '404',
        sort: '4',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      onModuleId: null,
      leftModuleData: [],
      appendToBody: true,
      // 自定义字段
      addEditCustomFieldVisible: false,
      onUitype: 1,
      fieldUitype: [
        { id: 1, label: '文本' },
        { id: 2, label: '整数' },
        { id: 3, label: '实数' },
        { id: 4, label: '日期' },
        { id: 5, label: '下拉框' },
        { id: 6, label: '多选框' },
        { id: 7, label: '手机' },
        { id: 8, label: '邮箱' }
      ],
      // 新增区域
      dialogAddModuleVisible: false,
      selectIconDialog: false,
      moduleForm: {
        id: null,
        blockname: null,
        icon: null,
        sort: null
      }
    }
  },

  methods: {
    getdata(evt) {
      console.log(evt.draggedContext.element.id)
    },
    datadragEnd(evt) {
      console.log('拖动前的索引：' + evt.oldIndex)
      console.log('拖动后的索引：' + evt.newIndex, this.tableDatas)
    },
    labelName(i) {
      return '博客管理 - ' + i
    },
    selectTab(e) {
      this.tabOnIndex = e.name
      this.loadModuleField()
    },
    selectTabChange(e, v) {
      this.onModuleId = e.$attrs.value
      this.loadModuleField()
    },
    // 加载页面信息
    loadModuleField() {
      this.onModuleId === null || !this.onModuleId ? this.onModuleId = this.leftModuleData[0]['id'] : null
      console.log('加载页面信息：', this.onModuleId, this.tabOnIndex)
    },
    // 修改模块信息
    handleModuleEdit(row) {
      this.moduleForm = row
      this.dialogAddModuleVisible = true
    },
    // 删除显示区域
    handleModuleDel(id) {
      console.log('删除显示区域', id)
      // 重新加载数据
      this.loadModuleField()
    },
    addField() {
      console.log('ccccxxxxxxx', this.onModuleId, this.tabOnIndex)
    },
    // 保存新增区域
    submitModule() {
      console.log('submitModule', this.moduleForm)
    },
    // 获取区域标题
    getModuleTitle() {
      return (this.moduleForm.id ? this.$t('btns.add') : this.$t('btns.edit')) + '显示区域'
    },
    // 获取自定义字段标题
    getFieldTitle() {
      return (this.moduleForm.id ? this.$t('btns.add') : this.$t('btns.edit')) + '自定义字段'
    },
    // 初始化数据
    load() {
      getModuleList({ type: 0 }).then(res => {
        this.leftModuleData = []
        this.leftModuleData = res.data
        // 初始化加载信息
        this.loadModuleField()
      })
    }
  },

  created() {
    this.load()
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
// 新增按钮
.btn-tools{
  position: relative;
  .btns{
    position: absolute;
    right: 0;
    z-index: 5;
    line-height: 40px;
    padding: 6px 0;
  }
}

.blocks{
  width: 100%;
  border: 1px solid #ebeef5;
  border-radius: 2px;
  display: block;
  margin: 0 0 15px;
  .title{
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
    border-bottom: 1px solid #ebeef5;
    font-size: 12px;
    color: #333;
  }
  .item{
    margin: 0;
    width: 50%;
    line-height: 30px;
    font-size: 12px;
    display: inline-block;
    padding: 0 0 0 15px;
    color: #666;
    span{
      display: none;
      &:first-child{
        text-indent: 10px;
      }
    }
    &:hover{
      background-color: #ebeef5;
      cursor: pointer;
      span{
        display: inline-block;
        &:hover{
          font-size: 14px;
          color: red;
        }
      }
    }
  }
}

// 处理显示区域表单样式
.module-form{
  .el-form-item{
    margin-bottom: 15px;
  }
}
</style>
